<script setup>
import { ref, onMounted, watch } from 'vue';
import { getCategoryListApi } from '@/apis/pms/category.js'

const props = defineProps({
  categoryPath: {
    type: Array,
    default(){
      return [];
    },
  },
})

const cascaderPath = ref(props.categoryPath)
const emits = defineEmits(['update:categoryPath'])

defineExpose({
  cascaderPath
})

// 监听数据改变
watch(cascaderPath, (newVal, oldVal) => {
  if (newVal !== null && newVal !== void 0 && newVal !== '') {
    emits('update:categoryPath',newVal);
  } else {
    emits('update:categoryPath', []);
  }
})

// 显示数据
const cascaderProps = {
  value: "id",
  label: "name",
  children: "children",
}

// 获取数据
const cascaderData = ref([])
const getCategoryList = async () => {
  const res = await getCategoryListApi()
  cascaderData.value = res.data;
}

onMounted(() => getCategoryList())
</script>

<template>
  <el-cascader :props="cascaderProps" :options="cascaderData" v-model="cascaderPath" clearable filterable />
</template>

<style scoped lang='scss'></style>